<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .c1 {
            width: 500px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="demo">
        <h3>阻止默认行为</h3>
        <form>
            <button @click="click1">提交</button>
            <button @click.prevent="click2">修饰符阻止默认提交</button>
        </form>
        <a href="http://baidu.com" @click.prevent="click2">百度</a>

        <h3>阻止冒泡  stop</h3>
        <div class="c1" @click="click2">
            <button @click.stop="click1">事件源</button>
        </div>
        <h3>self [自己的]</h3>
        <div class="c1" @click.self="click2">
            <button @click="click1">事件源</button>
        </div>

        <h3>once </h3>
        <button @click.once="click1">触发一次</button>
        <form action="">
            <button @click.prevent.once="click1">提交</button>
        </form>
        <h3>ctrl shift alt  按住ctrl</h3>
        <button @click.ctrl="click1">只要按了 ctrl 就能点击</button>
        <button @click.shift="click1">只要按了 shift 就能点击</button>
        <button @click.alt="click1">只要按了 alt 就能点击</button>
        <h3>按住ctrl + shift</h3>
        <button @click.ctrl.shift="click1">只要按了 ctrl + shift 就能触发</button>

        <h3>exact 只按住ctrl</h3>
        <button @click.ctrl.exact="click1">有且仅有ctrl功能键按住是触发</button>


    </div>
    <script>
        /**
         * 1. prevent:阻止默认行为
         * 
         */
        new Vue({
            el:'#demo',
            data:{
                name:'atguigu',
                age:19
            },
            methods:{
                click1(e){
                    e.preventDefault();
                    console.log('click1')
                },
                click2(){
                    console.log('click2')
                }
            }
        })
    </script>
</body>

</html>